<template>
  <div class="avatar-uploader">
    <input type="file" @change="handleChange" />
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AvatarUploader",

  methods: {
    handleChange(event) {
      console.log("event", event);
      const files = event.target.files;
      console.log("files", files);
      const file = files[0];

      // PS: 文件上传时，参数需要通过 FormData 来构造
      //     在最新的 axios 中，无需构造 FormData 的形式
      // const fd = new FormData();
      // fd.append("file", file);
      // fd.append("a", "b");

      request
        .post(
          "/app/base/comm/upload",
          {
            file,
            a: "b",
            b: "c",
          },
          {
            // PS: axios 默认的请求头中的 Content-Type 是 application/json
            //     当文件上传时，需要设置为 multipart/form-data
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        )
        .then((data) => {
          console.log("data", data);
        });
    },
  },
};
</script>
